<template>
    <div class="product-details-page">
      <div class="product-details-header">
        <video
          id="myVideo"
          src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
          controls
        >
        </video>
        <div class="video-intro v-flex-row-between">
          <div class="video-title">新版企业画册预售</div>
          <div class="isFavorite-wrapper v-flex-row-between">
            <div class="isFavorite-icon">
              <img src="/static/image/product_Details/collect.png" alt="">
              <!--<img src="" alt="">-->
            </div>
            <div class="isFavorite-text">收藏</div>
          </div>
        </div>
        <div class="content-introduce">支付圈大佬强力推荐</div>
        <div class="content-introduce">13251人学习</div>
        <div class="price-wrapper">
          <span class="origin-price">¥ 5000.00</span>
          <span class="vip-price">VIP：4888.00</span>
        </div>
      </div>
      <!--成为vip-->
      <div class="become-vip-wrapper">
        <div class="cell-wrapper v-flex-row-between">
          <div class="cell-title v-flex-row-between">
            <div class="vip-icon"><img src="/static/image/center/vip.png" alt=""></div>
            <div class="title">成为VIP,专享免费学习</div>
          </div>
          <div class="cell-arrow-icon">
            <img src="/static/image/center/arrow-right.png" alt="">
          </div>
        </div>
      </div>


      <!--商品详情 tab展示-->
      <!--tab切换-->
      <div class="tab-wrapper">
        <div class="tab-switch">
          <ul class="tab-item v-flex-row-around">
            <li class="tab-list v-flex-column-center" v-for="(item,index) in tabList" :key="index" @click="tabSwitch(item,index)">
              <div class="tab-cell tab-name" :class="{active:tabFlag == index}">
                <span>{{item.name}}</span>
                <!--v-show="item.name=='精选留言'"这个时举例不能这么写-->
                <span class="msg-num" v-show="item.name=='精选留言'">3</span>
              </div>
              <div class="tab-flag" v-show="tabFlag == index"></div>
            </li>
          </ul>
          <div class="tab-content" >
            <!--商品详情 图片展示-->
            <div class="content-types-img" v-show="tabFlag == 0">
              <div>
                <img src="/static/mock-image/style_1.jpg" alt="">
              </div>
              <div>
                <img src="/static/mock-image/style_2.jpg" alt="">
              </div>
            </div>
            <!--往期课程展示-->
            <div class="content-types-pass-curriculum" v-show="tabFlag == 1">
               <div class="pass-curriculum-list v-flex-row-start-baseline">
                 <div class="product-play-icon">
                   <img src="/static/image/product_Details/product-play-icon.png" >
                 </div>
                 <div class="product-play-title-wrapper">
                   <div class="product-play-title">
                     <span class="title">第008期</span>
                     <span>要不要给业务骨干升职</span>
                   </div>
                   <div class="play-case">3分35秒 1200人已学</div>
                 </div>
               </div>
              <div class="pass-curriculum-list v-flex-row-start-baseline">
                <div class="product-play-icon">
                  <img src="/static/image/product_Details/product-play-icon.png" >
                </div>
                <div class="product-play-title-wrapper">
                  <div class="product-play-title">
                    <span class="title">第009期</span>
                    <span>企业家一念天堂一念地狱</span>
                  </div>
                  <div class="play-case">3分35秒 19800人已学</div>
                </div>
              </div>
              <div class="pass-curriculum-list v-flex-row-start-baseline">
                <div class="product-play-icon">
                  <img src="/static/image/product_Details/product-play-icon.png" >
                </div>
                <div class="product-play-title-wrapper">
                  <div class="product-play-title">
                    <span class="title">第010期</span>
                    <span>预算控制全局——如何编制预算</span>
                  </div>
                  <div class="play-case">9分35秒 2450人已学</div>
                </div>
              </div>
            </div>
            <!--留言展示-->
            <div class="content-types-msg" v-show="tabFlag == 2">
              <div class="content-msg-wrapper">
                <div class="msg-header v-flex-row-between">
                  <div class="msg-info v-flex-row-between">
                    <div class="member-avatar">
                      <img src="/static/mock-image/avatar.jpg" alt="">
                    </div>
                    <div class="member-username">松二代</div>
                  </div>
                  <div class="msg-date">2018/12/05  12:45</div>
                </div>
                <!--评论内容-->
                <div class="msg-content">
                  <span>课程干货满满，听完后收获多多。</span>
                </div>
                <!--回复-->
                <div class="reply-content">
                  客服回复：谢谢您的购买
                </div>
              </div>
              <div class="content-msg-wrapper">
                <div class="msg-header v-flex-row-between">
                  <div class="msg-info v-flex-row-between">
                    <div class="member-avatar">
                      <img src="/static/mock-image/avatar.jpg" alt="">
                    </div>
                    <div class="member-username">松二代</div>
                  </div>
                  <div class="msg-date">2018/12/05  12:45</div>
                </div>
                <!--评论内容-->
                <div class="msg-content">
                  <span>课程干货满满，听完后收获多多。</span>
                </div>
                <!--回复-->
                <div class="reply-content">
                  客服回复：谢谢您的购买
                </div>
              </div>
              <div class="content-msg-wrapper">
                <div class="msg-header v-flex-row-between">
                  <div class="msg-info v-flex-row-between">
                    <div class="member-avatar">
                      <img src="/static/mock-image/avatar.jpg" alt="">
                    </div>
                    <div class="member-username">松二代</div>
                  </div>
                  <div class="msg-date">2018/12/05  12:45</div>
                </div>
                <!--评论内容-->
                <div class="msg-content">
                  <span>课程干货满满，听完后收获多多。</span>
                </div>
                <!--回复-->
                <div class="reply-content">
                  客服回复：谢谢您的购买
                </div>
              </div>
              <!--我要留言-->
              <div class="leave-msg" @click="toWriteMsg">
                <img src="/static/image/product_Details/write-msg.png" alt="">
                <span>我要留言</span>
              </div>
            </div>


          </div>
        </div>
      </div>

      <!--底部-->
      <div class="prodcut-details-tab v-flex-row-around">
        <!--首页-->
        <div class="tab-bar-wrapper v-flex-column-center" @click="toHomePage">
            <div class="tab-bar-icon">
              <img src="/static/image/product_Details/home-icon.png" alt="">
            </div>
            <div class="tab-bar-text">首页</div>
        </div>
        <!--客服-->
        <div class="tab-bar-wrapper v-flex-column-center">
          <div class="tab-bar-icon">
            <img src="/static/image/product_Details/service-icon.png" alt="">
          </div>
          <div class="tab-bar-text">客服</div>
        </div>
        <!--购物车-->
        <div class="tab-bar-wrapper v-flex-column-center">
          <div class="tab-bar-icon cart-set">
            <img src="/static/image/product_Details/cart-icon.png" alt="">
            <span class="product-num">9</span>
          </div>
          <div class="tab-bar-text">购物车</div>
        </div>
        <!--加入购物车-->
        <div class="check-options join-cart">加入购物车</div>
        <!--立即购买-->
        <div class="check-options buy-now">立即购买</div>
      </div>
    </div>
</template>

<script>
  export default {
    name: "productDetails",
    data () {
      return {
        tabFlag: 0,
        tabList:[
          { id:"002",name:'商品详情'},
          { id:"003",name:'往期课程'},
          { id:"001",name:'精选留言'}
        ],
      }
    },
    methods: {
      // tab切换
      tabSwitch (item,index) {
        this.tabFlag = index;
      },
      // 跳转到主页
      toHomePage () {
        this.$router.push({
          path: '/pages/index/index'
        })
      },
      // 发表评价
      toWriteMsg () {
        this.$router.push({
          path: '/pages/product/evaluate'
        })
      }
    }
  };
</script>

<style scoped lang="less">
  .product-details-page {
    box-sizing:border-box;
  }
  .product-details-header {
    padding:20rpx;
    box-sizing:border-box;
    background-color:@bg_color;
    & > video {
      width: 100%;
      height:399rpx;
    }
  }
  .video-intro {
    padding: 16rpx;
    .video-title {
      font-size:32rpx;
      font-weight:bold;
      color:#333;
    }
  }
  .isFavorite-wrapper {
    .isFavorite-icon {
      & > img {
        width: 39rpx;
        height: 34rpx;
      }
    }
    .isFavorite-text {
      color:#B3B4B5;
      font-size:28rpx;
      font-weight:400;
      padding:0rpx 10rpx;
    }
  }
    .content-introduce {
      font-size:28rpx;
      color:#B3B4B5;
      font-weight:400;
      padding:0rpx 16rpx;
    }
  .price-wrapper {
    padding:20rpx 16rpx 32rpx 16rpx;
    font-size:32rpx;
    font-weight:bold;
    .origin-price {
      color:#FF5050;
    }
    .vip-price{
      color:#FFBA00;
      display:inline-block;
      padding-left:27px;
    }
  }

  /*c成为vip*/
  .become-vip-wrapper {
    margin: 10px auto;
    background-color: #fff;
  }

  .cell-wrapper {
    margin: 0 auto;
    height: 100rpx;
    box-sizing: border-box;
    padding: 0rpx 44rpx 0rpx 30rpx;
    margin: 0px auto;
    .cell-title {
      .vip-icon {
        & > img {
          width: 55rpx;
          height: 50rpx;
        }
      }
      .title {
        color: #333;
        font-size: 28rpx;
        font-weight:bold;
        padding-left:16rpx;
      }
    }
    .cell-arrow-icon {
      & > img {
        width: 19rpx;
        height: 33rpx;
      }
    }
  }
  /*tab切换展示商品详情*/
  .tab-wrapper {
    margin-top:10px;
    background-color:#fff;
    margin-bottom:60px;
  }
  .tab-item{
    padding:12rpx 0rpx;
    border-bottom:1px solid #EDEDED;
    color:#B3B4B5;
  }
  .tab-list {
    padding:12rpx 0rpx;
    position:relative;
  }
  .tab-flag {
    width:38rpx;
    height:5rpx;
    background-color:@theme_bg_color;
    position:absolute;
    bottom:0px;
    left:50%;
    transform: translate(-50%,0);
  }
  .active {
    color:#333;
  }
  /*商品详情*/
  .content-types-img {
    box-sizing: border-box;
    padding:16rpx;
    img {
      width:100%;
    }
  }


  /*留言数量提示*/
  .tab-cell {
    position:relative;
    .msg-num {
      text-align:center;
      color:#fff;
      width:26rpx;
      height:26rpx;
      font-size:@font_size_24;
      background-color:#FF5050;
      border-radius:50%;
      position:absolute;
      top:-16rpx;
      right:-30rpx;
    }
  }
  .tab-name {
    font-size:@font_size_28;
  }
  //------
  /*tab切换显示的内容*/
  .tab-content {
    margin-bottom:100rpx;
  }
  /*往期课程展示*/
  .content-types-pass-curriculum .pass-curriculum-list {
    padding:20rpx 34rpx;
  }
  /*播放图标*/
  .product-play-icon {
    padding-right:20rpx;
    & > img {
      width: 26rpx;
      height:26rpx;
    }
  }
  .product-play-title {
    font-size:28rpx;
    color:#333;
    font-weight:400;
    .title {
      padding-right: 24rpx;
    }
  }
  .play-case {
    color:#B3B4B5;
    font-size:24rpx;
    font-weight:400;
  }
  // 留言
  .content-types-msg {
    background-color:#fff;
  }
  .content-msg-wrapper {
    padding: 8px 17px;
    border-bottom:1px solid #EDEDED;
  }
  .msg-header {
    .msg-date {
      color:#B3B4B5;
      font-size:24rpx;
      font-weight:400;
    }
  }
  .msg-info {
    .member-avatar {
      width:72rpx;
      height:72rpx;
      & > img {
        width:72rpx;
        height:72rpx;
        border-radius:50%;
      }
    }
    .member-username{
      padding-left:14rpx;
      color:#333;
      font-size:28rpx;
      font-weight:bold;
    }
  }
  /*评论内容*/
  .msg-content {
    color:#515151;
    font-size:28rpx;
    font-weight:400;
    padding:22rpx 18rpx;
  }
  /*回复*/
  .reply-content {
    color:#515151;
    background-color:#FAFAFA;
    border:1px solid #EDEDED;
    font-size:28rpx;
    font-weight:400;
    border-radius:10rpx;
    padding:18rpx;
  }
// 写留言
  .leave-msg {
    width:100%;
    height:100rpx;
    line-height:100rpx;
    background-color:@bg_color;
    text-align:center;
    color:#2B80FF;
    font-size:28rpx;
    font-weight:400;
    /*padding:32rpx 0rpx;*/
    /*position:fixed;*/
    /*bottom:100rpx;*/
    /*left:0rpx;*/
    & > img {
      width:14px;
      height:14px;
      padding-right:6px;
      vertical-align: -2px;
    }
  }



  // -----
  /*产品详情页面底部*/
  .prodcut-details-tab {
    width:100%;
    background-color:#fff;
    position:fixed;
    bottom:0px;
    left:0px;
    padding:12rpx 24rpx;
  }
  .tab-bar-wrapper {
    .tab-bar-icon {
      & > img {
        width:37rpx;
        height:37rpx;
      }
    }
    .tab-bar-text {
      color:#6B6E7C;
      font-size:20rpx;
      font-weight:400;
    }
  }
  .check-options {
    border-radius:18px;

  }
  .join-cart{
    width:189rpx;
    height:56rpx;
    line-height:56rpx;
    text-align: center;
    border:1px solid #2B80FF;
    color:#2B80FF;
    /*padding:14rpx 24rpx 16rpx 26rpx;*/
  }
  .buy-now {
    width:189rpx;
    height:56rpx;
    line-height:56rpx;
    text-align: center;
    background-color:#2B80FF;
    color:#fff;
    /*padding:14rpx 22rpx 16rpx 22rpx;*/
  }
  /*购物车数量显示*/
  .cart-set {
    position:relative;
    .product-num {
      text-align:center;
      color:#fff;
      width:26rpx;
      height:26rpx;
      font-size:@font_size_24;
      background-color:#FF5050;
      border-radius:50%;
      position:absolute;
      top:-12rpx;
      right:-20rpx;
    }
  }
</style>
